<template>
  <div class="tool-wrapper">
    <ul class="table-tool-bar">
      <li @click="$emit('refresh')">
        <a-icon class="icon" type="sync" />
      </li>
      <a-dropdown :trigger="[]" v-model="dropdownVisible">
        <li @click.stop="dropdownVisible = !dropdownVisible">
          <div class="columns-filter">
            <img src="@/assets/img/sudoku.svg" alt />
            <img class="arrow" src="@/assets/img/arrow-down.svg" alt />
          </div>
        </li>
        <div slot="overlay" class="drop-down-box">
          <a-checkbox-group v-model="checkedColumns">
            <ul @click.stop>
              <li v-for="item of checkboxList" :key="item.dataIndex">
                <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
              </li>
            </ul>
          </a-checkbox-group>
        </div>
      </a-dropdown>
    </ul>
  </div>
</template>

<script>
import cloneDeep from 'lodash.clonedeep'
import getLast from 'lodash.last'

export default {
  name: 'TableTools',
  props: {
    columns: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      defaultColumn: [],
      // 表格列控制工具
      dropdownVisible: false,
      // 渲染所有列的复选框数据
      checkboxList: [],
      // checkboxGroup 上绑定的值，选中的列的 dataIndex 数组
      checkedColumns: []
    }
  },
  created () {
    this.defaultColumn = cloneDeep(this.columns)
  },
  watch: {
    defaultColumn: {
      immediate: true,
      deep: true,
      handler (val) {
        const arr = cloneDeep(val)
        this.checkboxList = arr.filter((item) => item.dataIndex !== 'action')
      }
    },
    checkboxList: {
      immediate: true,
      deep: true,
      handler (val) {
        const arr = cloneDeep(val)
        this.checkedColumns = arr
          .filter((item) => item.checked === true)
          .map((item) => item.dataIndex)
      }
    },
    checkedColumns: {
      handler (val) {
        this.getColumns(val)
      }
    }
  },
  mounted () {
    document.body.addEventListener('click', this.setDropVal)
  },
  methods: {
    setDropVal () {
      this.dropdownVisible = false
    },
    // 获取编辑之后的列，并同步到父组件
    getColumns (val) {
      const _columns = []
      this.defaultColumn.forEach(
        (item) => val.includes(item.dataIndex) && _columns.push(item)
      )
      _columns.push(getLast(this.defaultColumn))
      this.$emit('update:columns', _columns)
    }
  },
  beforeDestroy () {
    document.body.removeEventListener('click', this.setDropVal)
  }
}
</script>

<style scoped lang="less">
.tool-wrapper {
  position: relative;

  .table-tool-bar {
    position: absolute;
    top: -56px;
    right: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    border-radius: 2px;
    border: 1px solid #e5e6e7;
    user-select: none;

    > li {
      display: inline-flex;
      align-items: center;
      height: 32px;
      padding: 0 12px;
      border-right: 1px solid #e5e6e7;
      transition: 0.3s;
      cursor: pointer;

      &:last-child {
        border-right: none;
      }

      &:active {
        background: #eee;
      }

      .icon {
        font-size: 14px;
      }

      img {
        width: 14px;
      }

      .columns-filter {
        display: inline-flex;
        align-items: center;
        line-height: 1;

        .arrow {
          width: 8px;
          margin-left: 3px;
        }
      }
    }
  }
}

.drop-down-box {
  width: 160px;
  margin-top: 5px;
  padding: 6px 0 6px 18px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 0 8px #c8c8c8;
  border-radius: 3px;

  ul {
    user-select: none;
    margin: 0;
    padding: 0;

    li {
      line-height: 2;
    }
  }
}
</style>
